﻿@using System.Configuration;
@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/css/index.css" rel="stylesheet" />
<script src="~/Content/js/jquery.min.js"></script>
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<div class="products-box-main">
    <div class="products-show-box">
        <div class="products-show-box-title">
            <ul>
                <li><a href="">首页</a></li>
                <li>-</li>
                <li><a href="">分类</a></li>
                <li>-</li>
                <li><a class="active-title">@ViewBag.a.ProductName</a></li>

            </ul>

        </div>
        <div class="products-show-box-mid">
            <div class="products-img">
                <div id="outBox">
                    <div class="leftBox">
                        <div class="normalBox w">

                            <div class="w" id="n"><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></div>



                        </div>
                        <div class="botBox">
                            <ul>
                                <li class="bord"><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></li>
                                <li><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></li>
                                <li><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></li>
                                <li><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></li>
                                <li><img src="@(ConfigurationManager.AppSettings["ShopBack"])/Content/@ViewBag.a.ProductImg" width="100%"></li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>

            <div class="products-box-mid-content">
                <h1 style="font-size: 16px;">@ViewBag.a.ProductName</h1>
                <ul class="ul-box">
                    <li>
                        <table width="490" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="65" height="40"><div align="center">官网价格：</div></td>
                                <td width="347" class="price">￥@ViewBag.a.Price</td>
                            </tr>
                            <tr>
                                <td height="40" width="65"><div align="center">上架时间：</div></td>
                                <td class="time">@ViewBag.a.CreateTime</td>
                            </tr>
                            <tr>
                                <td height="40" width="65"><div align="center">品牌：</div></td>
                                <td class="time">品牌名</td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <ul class="statistics">
                            <li>月销量<span class="count">99</span>+</li>
                            <li>累计评价<span class="count">99</span>+</li>
                            <li>关注<span class="count">99</span>+</li>
                        </ul>
                    </li>
                    <li>
                        <table width="490" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="65" height="40"><div align="center">规格：</div></td>
                                <td width="347" class="price">
                                    <ul class="statistics2">
                                        <li><label><input name="size" type="radio" value="" />S码</label></li>
                                        <li><label><input name="size" type="radio" value="" />XL</label></li>
                                        <li><label><input name="size" type="radio" value="" />XXL </label></li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td height="40" width="65"><div align="center">颜色：</div></td>
                                <td class="time">
                                    <ul class="statistics2">
                                        <li><label><input name="color" type="radio" value="" />黄色</label></li>
                                        <li><label><input name="color" type="radio" value="" />橙色</label></li>
                                        <li><label><input name="color" type="radio" value="" />红色</label></li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td height="40" width="65"><div align="center">数量：</div></td>
                                <td class="time">
                                    <button id="jian">-</button>&nbsp;<input type="text" value="1" id="num" class="kucun">&nbsp;<button id="jia">+</button>&nbsp;库存：999件
                                </td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <table width="490" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="65" height="35"><div align="right">发货地：</div></td>
                                <td width="404">广东省深圳市</td>
                            </tr>
                            <tr>
                                <td width="75" height="35"><div align="right">支付方式：</div></td>
                                <td width="404">货到付款&nbsp;|&nbsp;微信支付&nbsp;|&nbsp;支付宝&nbsp;|&nbsp;银联</td>
                            </tr>
                        </table>

                    </li>
                    <li>
                        <button type="button" id="btn1" class="buy">立刻购买</button>
                        <button type="button" id="btn2" class="buy">加入购物车</button>
                    </li>
                </ul>


            </div>

            <div class="products-shop-box">
                <ul class="shop-title">
                    深圳市XXX贸易有限公司
                    <li>公司代码：9144XXX9144XXX9144XXX</li>
                    <li>保证金：1000￥</li>
                    <li>联系人：张三</li>
                    <li>邮件：123456@qq.com</li>
                    <li>所在地：山东</li>
                    <li>地址：山东省菏泽市XXXX山东省菏泽市XXXX山东省菏泽市XXXX</li>
                    <li>店铺等级：<img src="images/xingxing.png" alt="" width="20" height="20" style="vertical-align: middle;"></li>
                    <li><button><a href="">进入店铺</a></button><button><a href="">收藏店铺</a></button></li>
                </ul>

            </div>

        </div>


        <div class="goods-detail-box">
            <div class="detail-left">
                <div class="detail-title">
                    <ul>
                        <li id="two1" onmouseover="setContentTab(&#39;two&#39;,1,3)" class="active">商品详情</li>
                    </ul>

                </div>

                <div class="detail" id="con_two_1">
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓球桌等，为灾后及贫困地区的孩子们搭建课
                    该商品参与了公益宝贝计划，卖家承诺每笔成交将为壹乐园计划捐赠0.02元。该商品已累积捐赠24560笔。 善款用途简介：基于游戏教育在儿童成长中的重要性，壹基金设立了“壹乐园计划”，帮助提供滑梯、攀爬架、跷跷板、秋千、乒乓
                </div>

            </div>
            <div class="detail-right">
                <div class="detail-right-title">
                    <span style="padding-left: 10px;">店铺热销产品</span>
                    <span style="float: right;padding-right: 10px;"><a href="">更多</a></span>
                </div>
                <ul>
                    <li><a href=""><img src=" ~/Content/images/small1.jpg" alt="" width="60" height="60"></a><div class="detail-right-hot"><h3><a href="">iphone11-64GB</h3></a><p style="text-decoration:line-through;font-size: 14px;color: #666666;font-weight: normal;">￥5499.00</p><p>￥5199.00</p></div></li>
                    <li><a href=""><img src="~/Content/images/small1.jpg" alt="" width="60" height="60"></a><div class="detail-right-hot"><h3>iphone11-64GB</h3><p style="text-decoration:line-through;font-size: 14px;color: #666666;font-weight: normal;">￥5499.00</p><p>￥5199.00</p></div></li>
                    <li><a href=""><img src="~/Content/images/small1.jpg" alt="" width="60" height="60"></a><div class="detail-right-hot"><h3>iphone11-64GB</h3><p style="text-decoration:line-through;font-size: 14px;color: #666666;font-weight: normal;">￥5499.00</p><p>￥5199.00</p></div></li>
                    <li><a href=""><img src="~/Content/images/small1.jpg" alt="" width="60" height="60"></a><div class="detail-right-hot"><h3>iphone11-64GB</h3><p style="text-decoration:line-through;font-size: 14px;color: #666666;font-weight: normal;">￥5499.00</p><p>￥5199.00</p></div></li>
                    <li><a href=""><img src="~/Content/images/small1.jpg" alt="" width="60" height="60"></a><div class="detail-right-hot"><h3>iphone11-64GB</h3><p style="text-decoration:line-through;font-size: 14px;color: #666666;font-weight: normal;">￥5499.00</p><p>￥5199.00</p></div></li>
                </ul>


            </div>

        </div>

    </div>
    <input type="hidden" value="@ViewBag.a.ProductName" id="ProductName" />
    <input type="hidden" value="@ViewBag.a.Price" id="Price" />
    <input type="hidden" value="@ViewBag.a.ProductImg" id="PrductImg" />
    <input type="hidden" value="@ViewBag.a.Id" id="ProductId" />
    <input type="hidden" value="@ViewBag.b" id="CustId" />
    <input type="hidden" value="@ViewBag.c" id="CustName" />
    <input type="hidden" value="" id="OrderId" />
    <input type="hidden" id="Addtime" />

</div>
<script>
    $(function () {
        var sdBoxW = $('.moveBox').css('width');
        sdBoxW = parseInt(sdBoxW);//移动层的宽度
        var magBoxW = $('.magBox').css('width');
        magBoxW = parseInt(magBoxW);//图片放大层的宽度
        var normalBoxW = $('.normalBox').css('width');
        normalBoxW = parseInt(normalBoxW);//事件绑定层的宽度
        var num = 0;//存放下标
        //找出放大图片的比例(核心)
        var scale = magBoxW / sdBoxW;
        //移入normalBox盒子
        $('.normalBox').hover(function () {
            $('.moveBox').css('display', 'block');
            $('.magBox').css('display', 'block');
        }, function () {
            $('.moveBox').css('display', 'none');
            $('.magBox').css('display', 'none');
        });
        //3、移入leftBox层
        $('.leftBox').mouseover(function () {
            //给放大的图片和图片层设置宽度；
            $('.magBox ul li img').css('width', scale * normalBoxW + 'px');
            $('.magBox ul li').css({ 'width': scale * normalBoxW + 'px', 'height': scale * normalBoxW + 'px' })
        });
        //4、设置放大倍数
        var n = 1;
        function sty() {
            $('.moveBox').css({ 'width': 200 / n + 'px', 'height': 200 / n + 'px' });
            $('.multiple').html(n);
            scale = magBoxW / (sdBoxW / n);
        }
        $('.btn1').click(function () {
            n++;
            sty()
        });
        $('.btn2').click(function () {
            if (n == 1) {
                return;
            } else {
                n--;
                sty()
            }
        });
        //1、移入缩小图关联
        $('.botBox ul li').attr('index', function (i, e) {
            return i;
        });
        $('.botBox ul li').mouseover(function () {
            if ($(this).attr('class') == 'bord') {
                return;//跳过第一个
            } else {
                $(this).attr('class', 'bord').siblings().removeAttr('class');
                var index = $(this).attr('index');
                //联动normal和magBox中的图片
                $('.normalBox .w').eq(index).attr('id', 'n').siblings().removeAttr('id');
                $('.magBox ul li').eq(index).attr('class', 'm').siblings().removeAttr('class');
                num = index;
            }
        });
        //2、鼠标在移动层移动
        $('.normalBox').mousemove(function (e) {
            var offset = $(this).offset();
            var X = e.pageX - offset.left - $('.moveBox').width() / 2;
            var Y = e.pageY - offset.top - $('.moveBox').height() / 2;
            if (X <= 0) {
                X = 0;
            } else if (X > $(this).width() - $('.moveBox').width()) {
                X = $(this).width() - $('.moveBox').width();
            }
            if (Y <= 0) {
                Y = 0;
            } else if (Y > $(this).height() - $('.moveBox').height()) {
                Y = $(this).height() - $('.moveBox').height();
            }
            $('.moveBox').css('left', X + 'px');
            $('.moveBox').css('top', Y + 'px');
            $('.magBox ul li').eq(num).css('left', -X * scale + 'px');
            $('.magBox ul li').eq(num).css('top', -Y * scale + 'px');
        });
    })

    //库存加减
    var num_jia = document.getElementById("jia");
    var num_jian = document.getElementById("jian");
    var input_num = document.getElementById("num");

    num_jia.onclick = function () {

        input_num.value = parseInt(input_num.value) + 1;
    }

    num_jian.onclick = function () {

        if (input_num.value <= 0) {
            input_num.value = 0;
        } else {

            input_num.value = parseInt(input_num.value) - 1;
        }

    }
</script>
<!--焦点图end-->
<!--选项卡js-->
<script type="text/javascript">
    function setContentTab(name, curr, n) {
        for (i = 1; i <= n; i++) {
            var menu = document.getElementById(name + i);
            var cont = document.getElementById("con_" + name + "_" + i);
            menu.className = i == curr ? "active" : "";
            if (i == curr) {
                cont.style.display = "block";
            } else {
                cont.style.display = "none";
            }
        }
    }
</script>

<script>
    //立即购买
    $("#btn1").click(function () {
        var CustId = $("#CustId").val();
        if (CustId == "") {

            if (confirm("请先登录之后才能购买!!!")) {
                window.location.href = "/Login/Index";
            }

        } else {
            @*var ProductName = $("#ProductName").val();
            var Price = $("#Price").val();
            var ProductPrth = $("#PrductImg").val();*@
            var Productid = $("#ProductId").val();
            @*var CustName = $("#CustName").val();
            var OrderId = $("#OrderId").val();*@
            var Count = $("#num").val();
            $.post("/Shopping/Cart", {
                @*ProductName: ProductName,
                Price: Price,
                ProductPrth: ProductPrth,*@
                Productid: Productid,
                @*CustId: CustId,
                OrderId: OrderId,
                CustName: CustName,*@
                Count: Count,
            }, function () {

                    window.location.href = "/Shopping/Cart?Productid=" + Productid + '&Count=' +Count ;
            }

            )
        }
    })

    //加入购物车
    $("#btn2").click(function () {
        var CustId = $("#CustId").val();
        if (CustId == "") {
            if (confirm("请先登录之后才能加入购物车!!!")) {
                window.location.href = "/Login/Index";
            }

        } else {
            var ProductName = $("#ProductName").val();
            var Price = $("#Price").val();
            var ProductPrth = $("#PrductImg").val();
            var Productid = $("#ProductId").val();
            var Count = $("#num").val();
            var Addtime = $("#Addtime").val();
            $.post("/Home/AddShopp", {
                ProductName: ProductName,
                Price: Price,
                ProductPrth: ProductPrth,
                Productid: Productid,
                CustId: CustId,
                Count: Count,
                Addtime: Addtime
            }, function (res) {
                if (res.Success) {
                    window.location.href = "/Shopping/Index"
                }

            })
        }

    })

</script>
<script>
    //获取input元素
    var _input = document.getElementById('Addtime');

    var date = new Date();
    var seperator = "/";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentDate = year + seperator + month + seperator + strDate; //当前日期

    _input.value = currentDate; //赋值给input.value
    _input.setAttribute('disabled', 'disabled'); //不可编辑
</script>


<script>
    var myDate = new Date();
    var yyyy = myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours();       //获取当前小时数(0-23)
    myDate.getMinutes();     //获取当前分钟数(0-59)
    myDate.getSeconds();     //获取当前秒数(0-59)
    myDate.getMilliseconds();    //获取当前毫秒数(0-999)
     myDate.toLocaleDateString();     //获取当前日期
   
    $("#OrderId").val(yyyy);

</script>